<template>
    <div class="sample-tutorial">
      <input type="file" name="files[]" id="fileDemo" accept=".xlsx,.xls"/>
      <el-button @click="getData1">获取数据</el-button>
      <el-button @click="importExcel">导入excel</el-button>
      <el-button @click="downloadExcel">下载excel</el-button>
    <div id="airTest"></div>
    </div>
  </template>
  <script setup>
  
  import { computed} from "vue";
  //import * as data from "./data.mjs"
  import  GC from "@grapecity/spread-sheets";
  import { onMounted } from "vue";
  import {saveAs} from 'file-saver'
  import { requestGet } from "@/axios/api";
 import { airJson } from "./json.js";
  import {
      getData
  } from './data.js';
  GC.Spread.Common.CultureManager.culture("de-DE");

  let spread = null

  let workbook =null

  const dataSource = computed(()=>{
   return getData()
  })

  const getData1 = ()=>{
   var sheet = workbook.getActiveSheet();
console.warn('获取数据源',sheet.getDataSource());
  }

  const downloadExcel = ()=>{
    let spread = workbook;
            let excelIo = new GC.Spread.Excel.IO();

            let fileName =   '测试excel下载2.xlsx';
            if (fileName.substr(-5, 5) !== '.xlsx') {
                fileName += '.xlsx';
            }

            let json = spread.toJSON({ includeBindingSource: true });
            console.warn(json);

            // here is excel IO API
            excelIo.save(json, function (blob) {
                saveAs(blob, fileName);
            }, function (e) {
                // process error
                console.log(e);
            }, {
                //password: password
            });
  }

  const importExcel = ()=>{
            let excelIO = new GC.Spread.Excel.IO();
            var excelFile = document.getElementById("fileDemo").files[0];
            console.warn('excelFile',excelFile);
            console.log(airJson);
            excelIO.open(excelFile, function (json) {
        var workbookObj = json;
        console.warn(json);
       workbook.fromJSON(workbookObj);
       const json1 = workbook.toJSON()
       workbook.fromJSON(json1);
    }, function (e) {
        console.log(e);
    });
  }

  const getExcelData = async()=>{
   const {datas} = await requestGet('/excelEnter/genSsjson/1671934153762716544')
   //var sheet = workbook.getActiveSheet();
   console.warn(11111,datas);
   workbook.fromJSON(JSON.parse(datas));
  }

  

  onMounted(()=>{
    spread =   new GC.Spread.Sheets.Designer.Designer(document.getElementById("airTest"));

   workbook = spread.getWorkbook();
   getExcelData()
   // var sheet = workbook.getActiveSheet();
 console.warn(dataSource.value);
//    console.warn(11111,sheet.name('air'));

//    sheet.tables.add("Table1", 1, 1, 10, 5, GC.Spread.Sheets.Tables.TableThemes.dark1);
// sheet.tables.add("Table2", 1, 7, 4, 5, GC.Spread.Sheets.Tables.TableThemes.dark1);
//      // 绑定RangeChanged事件
//   sheet.bind(GC.Spread.Sheets.Events.SelectionChanged, function (sender, args) {
// console.warn('区域33',sender, args);

// });
  })
  


  
  </script>
  
  <style>

  .sample-tutorial {
      position: relative;
      height: 100%;
      overflow: hidden;
  }
  
  #airTest{
   height: 100%;
  }

  

  </style>
  